<template>
  <div>
    <h2>深入v-model</h2>
    <!-- 探讨v-model双向数据绑定的本质 -->
    <input type="text" v-model="msg">
    <span>我爱你{{msg}}</span>
    <br>
    <input type="text" :value="msg" @input="msg = $event.target.value">
    <span>我爱你{{msg}}</span>
    <br>

    <!-- 完成的是父子之间数据同步 -->
    <!-- <CustomInput :value="msg" @input="msg = $event"></CustomInput> -->
    <CustomInput v-model="msg"></CustomInput>
    <!-- 第一步：把父组件当中的数据，通过props传递给子组件 -->
    <!-- 第二步：子组件声明接收属性，就可以读取value值进行使用 -->
    <!-- 第三步：父组件给子组件绑定input自定义事件，事件触发之后，父组件把接收到子组件修改的数据，
    拿到修改自己的数据 -->
    <!-- 第四步：子组件内部，在适当的时候触发自定义事件，传递数据 -->
    <!-- 第五步：父组件的数据发生改变，那么value就会重新传递给子组件，子组件也跟着修改 -->

    <!-- 你可以以后把el-input当input对象，看起来貌似就是完成数据双向绑定
    但其实本质它不是html标签，它完成的其实是父子数据同步 -->
    <el-input v-model="msg"></el-input>

  </div>
</template>

<script type="text/ecmascript-6">
  import CustomInput from './CustomInput.vue'
  export default {
    name: 'ModelTest',
    data(){
      return {
        msg:'赵丽颖'
      }
    },
    components: {
      CustomInput
    }
  }
</script>
